<template>

    <div style="background-color: #f3f4f6;">
    <!--<mu-appbar title="订单列表" style="position: fixed;left: 0;top: 0;background-color: white;">
      <mu-icon-button icon="navigate_before" slot="left" @click="$router.back()"/>
      <mu-icon-button icon=""
                      slot="right"
                      @click="$router.push({name:'login2'})"/>
    </mu-appbar>-->
    
    <section class="top-public" >
    		<mu-icon :size="32"  @click="$router.go(-1)" value="keyboard_arrow_left"  style="flex: 1;" />
    		<p style="flex: 7;font-size: 1.2rem;">我的订单</p>
    		<!--<span style="flex: 1;text-align: left;">添加</span>-->
    		<mu-icon :size="28"  @click="" value="add"  style="flex: 1;" />
    </section>
    
    <section style="width: 100%;height: 3.1rem;">
    	
    </section>
    
    
    
    <!--<section style="height: 2.6rem;align-items: center;display: flex;padding: 1rem;">
    	已完成订单
    </section>-->
    <div class="wrapper" ref="wrapper">
      <div class="content">
        <!--<mu-circular-progress
          :size="20"
          class="pull-down-refresh__progress"
          v-if="refreshing"
          style="position: relative;left: 50%;transform:translateX(-50%)"/>-->
        <order-item
          v-for="item in orderList"
          :id="item"
          @refresh="refresh"/>
        <!--<mu-divider/>-->
        <mu-circular-progress
          :size="20"
          class="pull-load-load__progress"
          v-if="loading"
          style="position: relative;left: 50%;transform:translateX(-50%)"/>
        <p v-else style="text-align: center">似乎已经没有了 <a href="javascript:void (0)" style="color: #1d7db1" @click="load">重新加载</a></p>
      </div>
    </div>
			
      </div>
    </div>



</template>

<script>
	  import BScroll from 'better-scroll'
	  import OrderItem from './orderItem.vue'
	 export default {
	 	 components: {
      OrderItem
    },
	 	  data() {
      return {
        scroller: null,

//        是否正在下拉刷新
        refreshing: false,
//        是否正在上拉加载
        loading: false,

//        列表
        orderList: [
        "1","2","3","4","5"
        ],
//        每次请求数
        numEachRequest: 5

      }
      },
          created() {
	//      请求订单
     			this.getOrderList(0, this.numEachRequest)
    },
    mounted() {

//      初始化滚动插件
      this.$nextTick(() => {
        this.scroller = new BScroll(this.$refs.wrapper, {
          pullDownRefresh: {
            stop: 10
          },
          pullUpLoad: {
            threshold: 100
          },
          click: true
        })
        this.scroller.on('pullingDown', () => {
          this.refresh()
        })
        this.scroller.on('pullingUp', () => {
          this.load()
        })
      })
    },
	 	  methods: {
//	 	  	testToken()
//	 	  	{
//	 	  		this.axios.post('/wyzs/sys/schedule/list',{	
//	    		}).then(function (response) {
//	        		 console.info(response)
//	 	  	})	    		
//	 	  },
 		finishPullDown() {
        this.scroller.finishPullDown()
        this.refreshing = false
      	},
      	finishPullUp() {
        console.log('finish')
        this.loading = false
        this.scroller.finishPullUp()
      },
	 	getOrderList(start,limit){
	 		for(var i=0;i<limit;i++){
	 			var j=i+start+limit
	 			this.orderList.push(j.toString())
	 		}
	 	console.info(start+"，"+limit)
	 	},
	 	refresh() {                                 //下拉刷新
        this.refreshing = true
        setTimeout(() => {
          this.getOrderList(0, this.numEachRequest)
          this.scroller.refresh()
        //  this.finishPullDown()
        }, 1000)
      },
      load() {
        this.loading = true
        setTimeout(() => {
          this.getOrderList(this.orderList.length, this.numEachRequest)
           this.scroller.refresh()
           this.loading = false
        },1000)
      }
	 	 }
    
	 }
</script>

<style scoped>
 .text {
    font-size: 14px;
  }
 .top-public{
	background: white;
	position: fixed;
	left: 0;
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 11;
	height: 3rem;
	width: 100%;
	border-bottom: 1px solid #e5e5e5;
 }
  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
</style>